BAILS OFF STUDIO  v4.8
======================

A gallery of customisable cricket overlays you control from your own PC, for OBS
and TikTok LIVE Studio. Customise every overlay's text, colours and font,
keep your logos in one place, and add new overlays over time.


STARTING THE APP
----------------
1. Double-click "Bails Off Studio.exe".
2. The first time, Windows may say "Windows protected your PC".
   Click "More info", then "Run anyway". This happens because the app
   isn't signed with a paid certificate. It's safe to run.
3. Your browser opens the dashboard.

The app has no window of its own. It runs quietly in the background until
you click "Close" at the bottom of the sidebar. Double-clicking the .exe
again just reopens the dashboard. A newer version automatically replaces
an older one that's still running (including "Westen Content Studio" and
"Stream Overlay Studio", this app's old names), and keeps your settings,
assets and added overlays.


THE DASHBOARD
-------------
Home              Opens first: everything inside the app, sponsor banners,
                  latest updates, competitions and what's coming soon.
                  (See the "Home page news" folder to update those.)
Bails Off Pro     Your licence: unlock every overlay (see BAILS OFF PRO).
Help & community  Opens the Discord server (once its invite link is in the
                  news feed): support tickets, news and competitions.
Overlay Gallery   Every overlay, grouped by category. Each card has:
                    Copy URL  - the link to paste into OBS / Live Studio
                    Test      - plays the overlay's animation on stream
                    Customize - text, colours, fonts, logos, position
Assets            Upload logos and images once, then pick them in any
                  overlay's Customize page, including sponsor logos.
Video Editing     Graphics for edited videos, like the nets scorecard
                  for Premiere Pro (see below).
Stream setup      Step-by-step instructions for OBS and TikTok LIVE Studio.

Every change you make shows on your stream straight away.
Overlays that work in portrait (TikTok / Reels) show a portrait example
video on their card (press play), and "Portrait examples" in the sidebar
shows them all together.


LOWER THIRDS
------------
Four full-width bars: Neon Cricket Bar, Neon Edge Bar, Stadium Lights Bar
and Neon Wave Bar. In Customize you can:
- set the headline (and extra headlines that take turns)
- make the top label show text or your rotating social media
- fill the left and right boxes with social media, text, an image or
  logo, sponsor logos, or messages. Social media, sponsors and messages
  can either scroll across the box or show one at a time (Movement).
- recolour the whole bar and every piece of text
- switch "Show on stream" off to slide the bar away, and on to bring it back
The newer bars are 1920 wide, made for landscape streams. In a vertical
(TikTok) scene, set the Browser source to the size on the card and shrink
it to fit.


CRICKET SCORE BANNER
--------------------
Scores -> Cricket Score Banner. Works two ways:
  Landscape strip  - Browser source 1920 x 150
  Portrait card    - Browser source 1080 x 330
"Layout: Automatic" picks the right one from the Browser source shape.
Add team names, short names, colours and logos (upload them under Teams).
During the match, use the scoring pad under "Live scoring": tap
. 1 2 3 4 6 WD NB W after each ball and the score, overs, batters, bowler
and "this over" all update, strike changes on odd runs and at the end of
the over, and fours, sixes and wickets get a celebration on screen.
Undo takes back the last tap. Set a Target for the chase and the banner
works out "Need X off Y" and the required rate. Every number can also be
typed in directly, and every colour and the font can be changed.


VIDEO EDITING: NETS SCORECARDS FOR PREMIERE PRO
-----------------------------------------------
Sidebar -> Video Editing -> Video Editing Overlays. There are two, both
for edited videos rather than live streams:
  Nets Scorecard for Premiere Pro           the full card (landscape or
                                            portrait)
  Portrait Nets Scorecard for Premiere Pro  a compact card for vertical
                                            9:16 videos: a sticker of the
                                            batter and a small runs box.
                                            The sticker is the batter's
                                            photo or logo, die-cut with a
                                            white border (cut-out PNGs
                                            follow their outline), with a
                                            name label next to or under
                                            it. "Show each batter as":
                                            Photo and name, Photo only,
                                            or Name / username only. Set
                                            the tilt and border colour,
                                            or switch "Batter style" back
                                            to Box.
                                            While scoring, drag a box on
                                            the video to move it out of
                                            the way, or drag its green
                                            corner to resize it. That
                                            only changes your scoring
                                            view, not the export.
                                            The export is one sequence
                                            with the batter box (V1) and
                                            score box (V2) on their own
                                            tracks, one clip each. Move or
                                            resize each box with Effect
                                            Controls > Motion.
Both work the same way:
1. Add your batters under Batters (the first one starts).
2. Click "Choose video" and pick your nets video. It stays on your PC.
3. Click "Big scoring mode". The video fills the window with large
   scoring buttons underneath and the timeline down the right. Click
   "Full screen" to use the whole monitor, and Esc (or "Exit big mode")
   to go back. With a portrait video, the video sits on the left with a
   big keypad beside it.
4. Play the video and tap a button as each ball happens. Use the -5s,
   -1s, frame and +1s buttons, the slider, or slow the video down
   (1/4x to 2x) to get the moment exactly right.
   Keyboard in big scoring mode:
     Space play / pause       Left / Right  back / forward 1 second
     , and .  one frame       (hold Shift for 5 seconds)
     0 1 2 3 4 6  runs        D wide   N no-ball   W out
     B next batter   H hide card   S show card   Z undo last tap
5. Every tap goes on the Timeline. Change any time, jump to it with the
   play button, or delete it with the X.
   Video won't play (.mov / ProRes)? Export an MP4 copy to score along
   with, or type the times in by hand.
6. Under Export settings pick your edit's frame rate and frame size, then
   click "Export for Premiere Pro". A folder is saved in
   Documents\Bails Off Studio\Exports with see-through PNGs and an
   .xml timeline. "Open export folder" shows it in File Explorer with the
   .xml selected. If the window doesn't pop up, check the taskbar, or use
   "Copy folder path" and paste it into File Explorer's address bar.
7. In Premiere Pro: File -> Import, choose the .xml, then drag the new
   sequence onto the track above your video, starting at 00:00:00:00.
   Each change is its own clip, so you can still trim or move them.
Fields: open "Field positions" under the scoring pad, pick the bowler
and RH / LH (and the field), then press "Show this field now" (or F) at
the right moment. "Hide field" (or G) takes it away. Field changes go on
the timeline like balls, and the field exports on its own track so you
can move it in Premiere. Its corner and size are under Field positions.
"Show field on video" (next to the speed, or press V) shows or hides the
field on the video while you play it back, so you can check exactly what
will be exported. It doesn't change the export.
Fours, sixes and outs get a celebration (length set under Celebrations).
Keep the export folder where it is, as Premiere links to the PNGs inside.


FIELD POSITIONS
---------------
Scores -> Field Positions. Shows the bowler's field on stream: a field
with a dot and the position name for each fielder. (Set "Style" to
Detailed for a header with the bowler and RH / LH, the 30-yard circle and
OFF / LEG.) Browser source size: 600 x 600.
- Add each bowler (Add bowler) and give them a name. Every bowler keeps
  their own field for right-handers (RH) and left-handers (LH).
- Click RH or LH to switch. The fielders slide across to the mirrored
  positions, so a field set for a right-hander works for a left-hander.
- "Load a field..." has ready-made fields (pace attacking / standard /
  defensive, short ball, spin attacking / defensive, powerplay, death).
- Drag a fielder to move them. They snap to the nearest named position
  (or stay exactly where you drop them). Click a fielder to pick their
  position by name or remove them. Click empty grass to add a fielder.
- "Save as preset" keeps a field to reuse for any bowler, and "Copy the
  other hand's field" copies RH to LH (or back).
- Choose what shows (header, bowler, field name, position names, 30-yard
  circle, OFF / LEG) and every colour and the font.
The same field picker is on the Cricket Score Banner's Customize page
(under Field positions), so you can change the field while you score, and
in both Premiere Pro scorecards (see below).


FOLLOWER GOAL
-------------
Goals -> Follower Goal. A centred cricket follower goal: a ball rolls along
a slim pitch towards the stumps (or a cricket bat fills up) with the count
on the bar, a "+1" pop for each new follower, and the bails flying with
"GOAL SMASHED!" when you hit the goal.
  Wide    - Browser source 1100 x 170
  Narrow  - Browser source 640 x 180 (good for portrait)

COUNTING FOLLOWS AUTOMATICALLY (Customize -> Followers)
Connect one or more. Every new follow adds 1, pops up on the goal and shows
the follower's name as "Latest".
- TikFinity / Streamer.bot (most reliable, any platform they support):
  have them open this link on every follow:
      http://localhost:3000/api/goal/follow
  Add ?user=NAME for the follower's name (Streamer.bot: ?user=%user%).
  ?count=1234 sets the count, ?n=5 adds 5, ?goal=2000 sets the goal.
- TikTok LIVE: through Euler Stream (eulerstream.com), the service many
  TikTok LIVE tools use. Make an account, paste your API key and your
  TikTok username, and click Connect. It waits while you're offline and
  connects by itself when you go live. Unofficial: if TikTok changes
  things it can stop working, so keep TikFinity as the backup.
- Twitch: official Twitch API. Create a free app at
  dev.twitch.tv/console/apps (the exact steps and the Redirect URL to paste
  are on the page), paste its Client ID, click Connect Twitch and allow
  access. Optionally show your real Twitch follower total.
- Kick: type your channel name and click Connect (unofficial live feed).
  If Kick blocks the lookup, open kick.com/api/v2/channels/YOURNAME in
  your browser, copy the whole page and paste it into "Channel ID".
"Count each person once per stream" stops unfollow / follow-again spam.
You can still tap +1 / +5 / +10 or type a number at any time.
Connections and keys are saved in connections.json in your data folder
and are never shared through the web link.


PHONE SPIN
----------
Social -> Phone Spin. A 3D phone spins onto the screen showing your
username, turns to each of your other accounts, then spins away. Set how
often it plays under "When it plays" (minutes plus seconds), how long each
account shows, the entrance style and number of spins, the button text,
your logo on the back of the phone, and every colour. Press Test to play it
straight away. Browser source size: 520 x 880.


SPONSOR TICKER
--------------
Tickers -> Sponsor Ticker -> Customize. Click "Upload logos" (or upload
them in Assets first and use "Add from Assets"). Logos scroll across the
strip, or choose "One at a time". You can add a name for each sponsor,
turn every logo white or one colour, or put a white card behind dark logos.


ADDING IT TO YOUR STREAM
------------------------
OBS Studio
  Sources -> + -> Browser. Paste the overlay's link as the URL and set the
  width and height to the size shown on its card (e.g. 1080 x 1920).

TikTok LIVE Studio
  Live Studio's Link source often refuses links from websites TikTok
  hasn't approved. The reliable way is OBS Virtual Camera:
  1. Set up your overlays and webcam in OBS on a 1080 x 1920 canvas.
  2. Click "Start Virtual Camera" in OBS.
  3. In Live Studio, add a Camera source and choose "OBS Virtual Camera".
  Other options (web links, green screen) are on the Stream setup page.


BAILS OFF PRO
-------------
The free version includes the Neon Cricket Bar, Neon Edge Bar, Cricket
Score Banner, News Ticker, Social Rotator and both Premiere Pro nets
scorecards. Free overlays show a Bails Off logo and a very light pattern
of logos across the graphic on stream, and free Premiere exports carry a
small watermark.

Bails Off Pro unlocks everything else (Stadium Lights Bar, Neon Wave Bar,
Phone Spin, Sponsor Ticker, Field Positions and the live Follower Goal),
removes the logos and export marks, and adds new overlay packs as they
come out.
Pro overlays show a PRO badge. You can try and customise them for free;
the preview shows "PRO PREVIEW" and OBS shows a lock notice until you
unlock Pro.

To unlock:
1. Click "Get Bails Off Pro" in the sidebar and subscribe.
2. Lemon Squeezy emails you a licence key.
3. Open "Bails Off Pro" in the sidebar, paste the key and click Activate.
   Your Pro overlays unlock straight away, even ones already in OBS.

- One subscription covers 2 PCs. Moving to a new PC? On the old one click
  "Remove from this PC", then activate the same key on the new one.
- The app checks your licence twice a day. If the internet is down, Pro
  keeps working for 7 days, so a dropped connection never breaks a stream.
- Manage or cancel your subscription from the Bails Off Pro page. If it ends,
  Pro overlays lock again; your settings are kept for when you come back.
- In the Discord, click "Verify Pro" in #verify-pro and paste the same key
  for the Pro role, the Pro lounge and priority support tickets.


ADDING NEW OVERLAYS
-------------------
New overlays come as overlay packs (.zip files). Click "Add overlay pack"
at the bottom of the sidebar and choose the .zip. It appears in the gallery
straight away. Share the same .zip with friends so they can add it too.

There's an example in the "Overlay packs" folder: Starting Soon Screen.zip.


UPDATES
-------
When a new version is out, the app's Home page and sidebar show
"Update to v..." with a download button. Download it, close the app
(Close at the bottom of the sidebar), unzip the new version and open it.
Your settings, logos and added overlays are kept.

Website: https://bailsoffstudio.pages.dev


GOOD TO KNOW
------------
- Put a word in *stars* in a headline or title to colour it,
  e.g.  England *v* India
- Settings, assets and added overlays are kept in:
  %APPDATA%\BailsOffStudio
  Copy that folder to move your whole setup to another PC.
- The neon font (Barlow Condensed) is built into the app, so overlays
  look right even offline.
